<template>
	<div class="device-contents">
		<div class="device-boxs">
			<div class="device-left" @scroll="handleScrollLeft">
				<div class="timeline">
					<div class="timeline-item" v-for="(item,x) in orientation" @click="handleItemText(x)">
						<div class="timeline-item-content">
							<div class="timeline-right">
								<div class="timeline-line" :style="{'background-color': item==1?'#fff':'#d9d9d9'}">
								</div>
								<div class="timeline-round" :style="{'background-color': item==1?'#2797ff':'#d9d9d9'}">
								</div>
								<div class="timeline-line" :style="{'background-color': item==20?'#fff':'#d9d9d9'}">
								</div>
							</div>
							<div class="timeline-item-text" :style="{'color': item==1?'#2797ff':'#000'}">
                {{item.name}}
							</div>
						</div>
						<!-- <div class="timeline-item-details">详情</div> -->
					</div>
				</div>
			</div>
			<div class="device-right" @scroll="handleScrollRight">
				<div class="device-lists" v-for="item in orientation" @click="goDeviceInfo(item)">
          <div class="" :id="item.name"></div>
					<div class="device-imgs">
						<img src="../../assets/images/device/16492339406107649.jpg" alt="">
					</div>
					<div class="device-fonts">
						<div class="device-names">
							{{item.name}}
						</div>
						<div class="device-infos">
						{{item.info}}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>


<script>
	export default {
		name: "device",
		data() {
			return {
      };
		},
    computed:{
      orientation(){
        return[
          {
            name:this.$t("volvoUnit.name"),
            info:this.$t("volvoUnit.introduce")
          }, {
            name:this.$t("perkinsUnit.name"),
            info:this.$t("perkinsUnit.introduce")
          }, {
            name:this.$t("cumminsUnit.name"),
            info:this.$t("cumminsUnit.introduce")
          }, {
            name:this.$t("upperEngineUnit.name"),
            info:this.$t("upperEngineUnit.introduce")
          }, {
            name:this.$t("nanTongPaouUnit.name"),
            info:this.$t("nanTongPaouUnit.introduce")
          }, {
            name:this.$t("nonMovingUnit.name"),
            info:this.$t("nonMovingUnit.introduce")
          }, {
            name:this.$t("yuchaiDisesl.name"),
            info:this.$t("yuchaiDisesl.introduce")
          }, {
            name:this.$t("weiChaiUnit.name"),
            info:this.$t("weiChaiUnit.introduce")
          }, {
            name:this.$t("weiManUnit.name"),
            info:this.$t("weiManUnit.introduce")
          }, {
            name:this.$t("keKeUnit.name"),
            info:this.$t("keKeUnit.introduce")
          }
        ]
      }
    },
		mounted() {},
		methods: {
      goDeviceInfo(item){
        this.$router.push({
          path:"/device",
          query:item
        })
      },
			handleScrollLeft(event) {
				console.log("left滚动位置：", event.target.scrollTop);
			},
			handleScrollRight(event) {
				console.log("right滚动位置：", event.target.scrollTop);
				var scrollTops = event.target.scrollTop
				var timelineRound = document.querySelectorAll('.timeline-round')
				var timelineItemText = document.querySelectorAll('.timeline-item-text')
				var count = -300;
				// timelineRound.forEach((i, x) => {
				// 	i.style.backgroundColor = "#d9d9d9"
				// 	timelineItemText[x].style.color = "#000"
				// 	if (scrollTops >= count && scrollTops < count + 304) {
				// 		timelineRound[x].style.backgroundColor = "#2797ff"
				// 		timelineItemText[x].style.color = "#2797ff"
				// 	}
				// 	count = count + 304

				// })
				// if (scrollTops > 3300) {
				// 	var deviceLeft = document.querySelector('.device-left')
				// 	deviceLeft.scrollIntoView({
				// 		behavior: 'smooth'
				// 	});
				// }
				// if (scrollTops >= 0 && scrollTops < 200) {
				// 	timelineRound[0].style.backgroundColor = "#2797ff"
				// } else if (scrollTops >= 200 && scrollTops < 500) {
				// 	timelineRound[1].style.backgroundColor = "#2797ff"
				// } else if (scrollTops >= 500 && scrollTops < 800) {
				// 	timelineRound[2].style.backgroundColor = "#2797ff"
				// }
			},
			handleItemText(i) {
        console.log(i)
				var deviceLists = document.querySelectorAll('.device-lists')

        deviceLists[i].scrollIntoView({behavior:'smooth',block:"nearest"})

			}
		}

	}
</script>


<style>
	.device-contents {
		width: 100%;
		background-color: black;
		display: flex;
		justify-content: center;

	}

	.device-boxs {
		width: 100%;
		/* width: 1200px; */
		padding: 40px 0;
		display: flex;
		background-color: #fff;
	}

	.device-left {
		width: 25%;
		background-color: #fff;
		height: calc(100vh - 120px);
		display: flex;
		flex-direction: row-reverse;
		overflow-y: auto;

		&::-webkit-scrollbar {
			width: 8px;
		}
	}

	.device-left:hover {
		&::-webkit-scrollbar {
			width: 8px;
		}

		&::-webkit-scrollbar-track {
			background: rgba(0, 0, 0, 0);
		}

		&::-webkit-scrollbar-thumb {
			border-radius: 12px;
			border-left: solid 3px #fff;
			border-right: solid 3px #fff;
			background: rgba(162, 162, 162, 0.2);
		}
	}

	.device-right {
		width: 75%;
		background-color: #fff;
		height: calc(100vh - 120px);
		overflow-y: auto;

		&::-webkit-scrollbar {
			width: 8px;
		}

		&::-webkit-scrollbar-track {
			background: rgba(0, 0, 0, 0);
		}

		&::-webkit-scrollbar-thumb {
			border-radius: 12px;
			border-left: solid 3px #fff;
			border-right: solid 3px #fff;
			background: rgba(162, 162, 162, 0.4);
		}
	}

	/* 右边内容 */
	.device-lists {
		display: flex;
		width: 940px;
		border-bottom: 2px solid #dfdfdf;
		margin-left: 25px;
	}

	.device-imgs img {
		width: 400px;
		height: 300px;
		margin-right: 20px;
	}

	.device-fonts {}

	.device-names {
		margin: 10px 0 20px 0;
		font-size: 20px;
		font-weight: 600;
	}

	.device-infos {
		color: #7a7a7a;
    font-size: 14px;
    text-indent:10px;
    display: -webkit-box;
    -webkit-line-clamp: 7; /* 显示行数 */
    -webkit-box-orient: vertical;
    overflow: hidden;
	}

	/*  */
	.timeline {
		padding: 0 10px 0 0;
	}

	.timeline-item:hover {
		cursor: pointer;
	}

	.timeline-item-content {
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
	}

	.timeline-item-text {
		margin-right: 20px;
		text-align: right;
		line-height: -200px;
	}

	.timeline-item-details {
		margin-top: 5px;
	}

	/* 右边图标 */
	.timeline-right {
		width: 10px;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.timeline-round {
		background-color: #d9d9d9;
		width: 10px;
		height: 10px;
		border-radius: 50%;
	}

	.timeline-line {
		background-color: #d9d9d9;
		width: 2px;
		height: 20px;
	}
</style>
